<template>
  <div class="header">
    <div class="logo">
      <div class="logo_title">售后系统</div>
      <div class="logo-separator"></div>
      <img src="@/assets/ysten_logo.png" alt="Logo" class="logo-img">
    </div>
    <div class="collapse-icon">
      <i class="el-icon-menu"></i>
    </div>

    <breadcrumb-nav></breadcrumb-nav>

    <el-dropdown class="user-container" trigger="click" @command="handleCommand">
      <span class="info-wrapper">
        欢迎！{{userName}}
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import { getUserName } from '@/utils/token'
  import BreadcrumbNav from '@/components/common/BreadcrumbNav'
  import {removeWatermark, setWaterMark} from '@/utils/watermark'

  export default {
    name: 'header',
    components: {
      BreadcrumbNav
    },
    data () {
      return {
        userName: getUserName()
      }
    },
    mounted() {
      setWaterMark()
    },
    destroyed() {
      removeWatermark()
    },
    methods: {
      handleCommand (command) {
        if (command === 'changePwd') {
          this.changePwd()
        } else {
          this.logout()
        }
      },
      changePwd () {
        this.$router.push('/basic/changePwd')
      },
      logout () {
        this.$confirm('确认退出系统', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('Logout').then(() => {
            this.$router.push('/login')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #337ab7;
    color: #fff;
    z-index: 11;

    .logo {
      float: left;
      width: 160px;
      font-size: 18px;
      padding-left: 10px;
      padding-right: 10px;
      border-color: rgba(238, 241, 146, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      display: flex; /* 改为 flex 容器 */
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
      .logo_title {
        flex: 1;
        font-size: 20px;
        font-weight: bold;
      }

      .logo-separator {
        margin-left: 8px;
        margin-right: 8px;
        width: 1px;
        height: 26px;
        background-color: #ccc;
      }

      .logo-img {
        display: block;
        width: auto;
        height: 22px;
        object-fit: contain;
      }
    }

    .collapse-icon {
      padding: 0 23px;
      float: left;
    }
    .user-container {
      height: 60px;
      display: inline-block;
      position: absolute;
      right: 35px;
      .info-wrapper {
        cursor: pointer;
        position: relative;
        font-size: small;
        color: #fff;
      }
    }
  }
</style>
